@extends('admin.layout.layout')
@section('content')
    <style>
        .icons{
            position: fixed;
            width: 90%;
            height:80%;
            left:5%;
            top:10%;
            background: #fff;
            z-index: 99;
            overflow: auto;
            border-radius:8px;
            display: none;
        }
        .black3{
            display: none;
            position: fixed;
            width: 100%;
            height:100%;
            left:0;
            top:0;
            background: rgba(0,0,0,0.5);
            z-index: 98;
            overflow: auto;
        }
        .icon-one{
            transition: 0.5s ease;
            cursor: pointer;
        }
        .icon-one:hover{
            background: #e1e8ee;
        }
        .icon-name{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <div class="animatedParent animateOnce">
        <div class="container-fluid my-3">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">

                    <div class="black3"></div>
                    <div class="icons">
                        @component('admin.components.icons')
                        @endcomponent
                    </div>


              

                    <div class="card-body b-b">

                                
                            <form class="form-material mini-form ajaxForm" method="POST" @if(isset($editData)) action="{{url('/admin/menu',['id'=>$editData->id])}}" @else action="{{url('/admin/menu')}}" @endif)>
                                @isset($editData)
                                    @method('PUT')
                                @endisset

                                @csrf
                                <div class="body">
                                    @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                    
                                    @component('admin.components.select',[
                                        'title'=>'父级菜单',
                                        'name'=>'pid',
                                        'selectData'=>$selectData,
                                        'default'=>isset($editData)?$editData->pid:''
                                        ])
                                    @endcomponent
                                    
                                    <div class="readonly">
                                        @component('admin.components.input',['title'=>'菜单图标(点击下方选择)',
                                            'name'=>'icon',
                                            'default'=>isset($editData)?$editData->icon:'',
                                            'required'=>'no'
                                            ])
                                        @endcomponent
                                    </div>
                                    
                                    @component('admin.components.input',[
                                        'title'=>'菜单名称',
                                        'name'=>'menu_name',
                                        'default'=>isset($editData)?$editData->menu_name:''
                                        ])
                                    @endcomponent
                                    
                                    @component('admin.components.input',[
                                        'title'=>'控制器名称',
                                        'name'=>'controller_name',
                                        'default'=>isset($editData)?$editData->controller_name:''
                                        ])
                                    @endcomponent

                                    @component('admin.components.input',[
                                        'title'=>'方法名称',
                                        'name'=>'method_name',
                                        'default'=>isset($editData)?$editData->method_name:''
                                        ])
                                    @endcomponent

                                    @component('admin.components.input',[
                                        'title'=>'路由路径',
                                        'name'=>'route_path',
                                        'default'=>isset($editData)?$editData->route_path:'',
                                        'required'=>'no'
                                        ])
                                    @endcomponent

                                    @component('admin.components.radio',[
                                        'title'=>'是否显示在导航',
                                        'name'=>'is_nav',
                                        'default'=>isset($editData)?$editData->is_nav:''
                                        ])
                                    @endcomponent

                                    @component('admin.components.input',[
                                        'title'=>'排序',
                                        'name'=>'sort',
                                        'default'=>isset($editData)?$editData->sort:100,
                                        'required'=>'no'
                                        ])
                                    @endcomponent

                                </div>
                                <button type="submit" class="btn btn-primary mt-2"><i class="icon-arrow_forward mr-2"></i>提交</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(".black3").click(function(){
            $(".icons,.black3").fadeOut();
        });
        $(".icon-one").click(function(){
           var name=$(this).find(".icon-name").html();
           $("input[name='icon']").val(name).trigger('input');
           $(".icons,.black3").fadeOut();
        });
        $("input[name='icon']").click(function(){
            $(".icons,.black3").fadeIn();
        });
    </script>
@endsection